<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            width: 100%
        }
        .modal-backdrop {
            opacity: 0 !important;
            filter: alpha(opacity=0) !important;
        }
    </style>
    <link rel="stylesheet" href="../static/css/style.css">

    <script src="../js/jquery-2.1.1.min.js"></script>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../static/js/global.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.0/locale/bootstrap-table-zh-CN.js"></script>
    <script>
        //渲染表格
        $(function () {
            $('#table').bootstrapTable({
                //请求方式  get请求中文会乱码，建议使用post请求
                method: 'post',
                //请求头部的设置
                contentType: 'application/json',
                //路径
                url: '/querySCellAll.action',
                //设置交替行样式
                striped: true,
                //初始显示页号
                pageNumber: 1,
                //设置表格高度
                height: 600,
                //是否显示分页
                pagination: true,
                //设置是服务端分页还是客户端分页
                sidePagination: 'server',
                //页大小
                pageSize:5,
                //分页列表
                pageList:[5,10],
                //上传到服务端的参数
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNum: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,

                    };
                },
                // 定义列名
                columns: [
                    {title: '配置单编号', field: 'storeId', align: 'center',formatter: function (value,row,index){
                        return "<a href='#' onclick='make("+JSON.stringify(row)+")'>"+value+"</a>"
                        }},
                    {title: '产品编号', field: 'productId', align: 'center'},
                    {title: '产品名称', field: 'productName', align: 'center'},
                    {title: '复核状态', field: 'checkTag', align: 'center',
                        formatter: function (value,row,index) {
                            if(value==="S001-0"){
                                return "<span class=\"badge badge-warning\"><font>等待审核</font><span class=\"ms-1 fas fa-stream\"></span></span>";
                            }else if(value==="S001-1"){
                                return "<span class=\"badge badge-success\"><font>审核通过</font><span class=\"ms-1 fa fa-check\"></span></span>";
                            }else{
                                return "<span class=\"badge badge-danger\"><font>审核不通过</font><span class=\"ms-1 fa fa-redo\"></span></span>";
                            }
                        },
                    }
                ]
            });
        })
        function make(obj){
            //产品设计人
            $('#d_register').val(obj.register);
            //产品名称
            $('#productName').val(obj.productName);
            //产品编号
            $('#productId').val(obj.productId);
            //库存报警下限数
            $('#min_amount').val(obj.minAmount);
            //库存报警上限数
            $('#max_amount').val(obj.maxAmount);
            //库存最大存储量
            $('#amount').val(obj.maxCapacityAmount);
            //安全库存配置单 复核人
            $('#checker').val(obj.checker);
            //安全库存配置单 复核时间
            $('#checkTime').val(obj.checkTime);
            //配置需求
            $('#config').val(obj.config);
            //赋值到元素标签后打开模态框
            $('#exampleModal').modal("show");
        }
    </script>
</head>
<body>
<table id="table"></table>

<div class="modal fade" id="exampleModal" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 100%;">
        <div class="modal-content" style="width: 100%;">
            <div class="modal-header">
                <h2 class="modal-title" id="exampleModalLabel" style="width: 100%;text-align: center;">安全库存配置单</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>


            <div class="modal-body">

                <div style="display: flex;">
                    <div class="input-group mb-2">
                        <div class="input-group-text">产品名称<span class="text-danger scale5 ms-2">*</span></div>
                        <input id="productName" type="text" class="form-control" style="background-color: white;" readonly>
                    </div>
                    <div style="width: 40px;"></div>
                    <div class="input-group mb-2">
                        <div class="input-group-text">产品编号<span class="text-danger scale5 ms-2">*</span></div>
                        <input id="productId" type="text" class="form-control" style="background-color: white;" readonly>
                    </div>
                </div>

                <div style="display: flex;">
                    <div class="input-group mb-2">
                        <div class="input-group-text">库存报警下限数<span class="text-danger scale5 ms-2">*</span></div>
                        <input id="min_amount" type="text" class="form-control" style="background-color: white" readonly>
                    </div>
                    <div style="width: 40px;"></div>
                    <div class="input-group mb-2">
                        <div class="input-group-text">库存报警上限数<span class="text-danger scale5 ms-2">*</span></div>
                        <input id="max_amount" type="text" class="form-control" style="background-color: white" readonly>
                    </div>
                </div>

                <div>
                    <table class="table table-bordered">
                        <thead>
                        <tr class="text-center">
                            <th style="font-weight: bold;">序号</th>
                            <th style="font-weight: bold;">库房名称</th>
                            <th style="font-weight: bold;">存储地址编号</th>
                            <th style="font-weight: bold;">存储地址名称</th>
                            <th style="font-weight: bold;">最大存储量<span class="text-danger scale5 ms-2">*</span></th>
                            <th style="font-weight: bold;">存储单位</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="text-center">
                            <td>1</td>
                            <td>成品库</td>
                            <td>01-01-01</td>
                            <td>电子-计算机-服务器</td>
                            <td><input id="amount" type="text" class="form-control" style="text-align: center;background-color:white;" readonly></td>
                            <td><input type="text" class="form-control" style="text-align: center;background-color: white" readonly></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div style="display: flex;">
                    <div class="input-group mb-2">
                        <div class="input-group-text">设计人<span class="text-danger scale5 ms-2">*</span></div>
                        <input id="d_register" type="text" class="form-control" style="background-color: white;" readonly>
                    </div>
                    <div style="width: 40px;"></div>
                    <div class="input-group mb-2">
                        <div class="input-group-text">复核人<span class="text-danger scale5 ms-2">*</span></div>
                        <input id="checker" type="text" class="form-control" style="background-color: white;" readonly>
                    </div>
                </div>

                <div>
                    <div class="input-group mb-2">
                        <div class="input-group-text">复核时间<span class="text-danger scale5 ms-2">*</span></div>
                        <input id="checkTime" type="text" class="form-control" style="background-color: white;" readonly>
                    </div>
                </div>
                <div>
                    <div class="input-group mb-2">
                        <div class="input-group-text">描述</div>
                        <textarea id="config" class="form-control solid" style="height: 100px;background-color: white" readonly></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>